<template>
  <div class="achievement g-wrap">
    <mt-header fixed title="消息中心">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>

    <ul class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="20">
      <li v-for="(item, index) in messageData">
        <span class="key">{{ index + 1 }}</span>
        {{ item.title }}
        <p>
          <span>{{ moment(item.createTime).format('YYYY-MM-DD') }}</span
          >{{ item.info }}
        </p>
      </li>
    </ul>

    <div v-if="isLoading && total === 0" class="noData">
      暂无数据
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { TeacherMessage } from '@/api'
import moment from 'moment'
import { Indicator, Toast } from 'mint-ui'

export default {
  name: 'research',
  data() {
    return {
      moment,
      isLoading: 0,
      messageData: '',
      loading: true,
      allLoaded: false,
      total: 0,
      currentPage: 1, //当前页面
      ajax: {
        pageSize: 30,
        pageNum: 1
      }
    }
  },
  methods: {
    getStudentClientInfo(type) {
      this.loading = true
      this.ajax.pageNum = this.currentPage
      if (type === 'up') {
        this.ajax.pageNum++
      }

      if (type === 'up' && this.total <= this.currentPage * this.ajax.pageSize) {
        return
      }

      Indicator.open()
      const param = this.ajax
      request
        .post(TeacherMessage, param)
        .then((res) => {
          Indicator.close()
          const r = res.data
          this.isLoading = 1
          this.messageData = this.messageData || []
          this.total = (r.data && r.data.total) || 0
          if (r && r.data && r.data.rows && r.data.rows.length > 0) {
            this.messageData = this.messageData.concat(r.data.rows)

            this.currentPage = this.ajax.pageNum
            Toast({
              message: '第（' + this.currentPage + '）页',
              duration: 1500
            })
            this.loading = false
          }
          if ((r.data && r.data.rows && r.data.rows.length === 0) || !r.data) {
            Toast({
              message: '已加装全部数据',
              duration: 1500
            })
            this.loading = true
          }
        })
        .catch((err) => {})
    },

    loadMore() {
      this.getStudentClientInfo('up')
    }
  },
  mounted() {
    this.getStudentClientInfo()
  }
}
</script>

<style scoped lang="less">
@import url('../../assets/styles/base.less');
.achievement {
  .list {
    height: 100%;
    padding: (20 / @base);
    li {
      padding: (20 / @base) 0;
      border-bottom: 1px solid #e8e8e8;
      p {
        width: 100%;
        overflow: hidden;
        margin-top: (10 / @base);
        color: #999;
        span {
          float: right;
        }
      }
    }
    li:last-of-type {
      border: none;
    }
  }
  .topBtn {
    text-align: right;
    width: 100%;
    overflow: hidden;
    button {
      float: right;
      margin-right: (20 / @base);
      width: (300 / @base);
    }
  }
  .btnBox {
    text-align: center;
    button {
      width: 20%;
      margin: (10 / @base) auto;
    }
  }
  select {
    border: none;
    background: none;
    font-size: inherit;
    width: 100%;
  }
  .searchlayer {
    padding: (15 / @base) (15 / @base);
  }
  .infoDetail {
    .title {
      font-weight: 500;
      margin-bottom: (10 / @base);
    }
    padding: (20 / @base) (15 / @base);
    .con {
      color: #888;
      font-weight: normal;
    }
  }
  .noData {
    margin-top: (20 / @base);
  }
}
</style>
